<!DOCTYPE HTML>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Message.js</title>
	<link rel="stylesheet" href="./message.min.css">
	<script src="./message.min.js"></script>
	<style>
		.box {
			margin-top: 300px;
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="types">
			<button class="btn" data-type='info'>info提示</button>
			<button class="btn" data-type='error'>error提示</button>
			<button class="btn" data-type='success'>success提示</button>
			<button class="btn" data-type='warning'>warning提示</button>
			<button class="btn" data-type='loading'>loading提示（默认手动关闭）</button>
		</div>
		<div class="settings" style="margin-top: 50px;">
			<button class="auto-close">自动关闭</button>
			<button class="manually-close">手动关闭</button>
			<button class="show-close">显示关闭按钮</button>
			<button class="hide-close">隐藏关闭按钮</button>
			<button class="close-all">立即关闭全部</button>
		</div>
		<div class="settings" style="margin-top: 50px;">
			<button class="create-loading">创建一个loading</button>
			<button class="close-loading">关闭这个loading</button>
		</div>
		<div class="position" style="margin-top: 50px;">
			<button class="set-position" data-position="left">左边显示</button>
			<button class="set-position" data-position="center">中间显示</button>
			<button class="set-position" data-position="right">右边显示</button>
		</div>
	</div>
	<script>
		var $types = document.querySelector(".types");
		var btns = $types.querySelectorAll(".btn");
		for (var i = 0, btn; btn = btns[i]; i++) {
			btn.addEventListener("click", function (e) {
				var type = this.getAttribute("data-type");
				var txt = this.innerText;
				Qmsg[type](txt);
			})
		}

		var $position = document.querySelector(".position");
		var $pos = $position.querySelectorAll(".set-position");
		for (var i = 0, botn; botn = $pos[i]; i++) {
			botn.addEventListener("click", function (e) {
				var position = this.getAttribute("data-position");
				var txt = this.innerText;
				Qmsg.config({
					position: position
				})
				Qmsg.info('我来自 <i style="color:red">' + txt + '</i>', {
					html: true
				})
			})
		}

		document.querySelector(".auto-close").onclick = function () {
			Qmsg.config({
				autoClose: true
			})
			Qmsg.warning('设置 <i style="color:green">autoClose</i> = <i style="color:red">true</i>', {
				html: true
			})
		}

		document.querySelector(".manually-close").onclick = function () {
			Qmsg.config({
				autoClose: false,
				showClose: true
			})
			Qmsg.warning('设置 <i style="color:green">autoClose</i> = <i style="color:red">false</i>', {
				html: true
			})
		}

		document.querySelector(".show-close").onclick = function () {
			Qmsg.config({
				showClose: true
			})
			Qmsg.warning('设置 <i style="color:green">showClose</i> = <i style="color:red">true</i>', {
				html: true
			})
		}
		document.querySelector(".hide-close").onclick = function () {
			Qmsg.config({
				showClose: false
			})
			Qmsg.warning('设置 <i style="color:green">showClose</i> = <i style="color:gray">false</i>', {
				html: true
			})
		}
		document.querySelector(".close-all").onclick = function () {
			Qmsg.closeAll();
		}
		var loading;
		document.querySelector(".create-loading").onclick = function () {
			loading = Qmsg.loading("小鸭子,游呀游~", {
				onClose: function () {
					console.log("游上了岸~")
				}
			});
		}
		document.querySelector(".close-loading").onclick = function () {
			loading && loading.close();
		}
	</script>
</body>

</html>